<template>
  <!-- <div class="diqu" :style="{'zoom':thezoom}"> -->
  <div class="diqu">
    <el-empty class='quanx' description="您无权访问" v-if="pid == 2 || com_id != 0"></el-empty>
    <div class="top_title" :style="{ '--zoom': zoom }">
      {{ changeList.title }}<br />
      <span class="top_title_Small">更新时间：{{ changeList.update_time }}</span>
    </div>
    <el-button class="off" @click="off" :style="{ '--zoom': zoom }">
      退出
    </el-button>
    <!-- <el-button class="return" @click="pushome">
      返回首页
    </el-button> -->
    <el-button class="switch" @click="pushswitch" :style="{ '--zoom': zoom }">
      下一屏
    </el-button>

    <el-button class="switch " :style="{ '--zoom': zoom }" :class="value ? 'switch_switch1' : 'switch_switch2'"
      @click="switchList">
      {{ !this.value ? '净增量模式' : '变化量模式' }}
    </el-button>
    <!-- <el-switch v-model="value" :width="80" @change="switchList" active-color="#0f1b47" inactive-color="#28fefe" class="switch switch_switch" >
    </el-switch> -->

    <el-button class="Fullscreen" @click="screen" icon="el-icon-full-screen" :style="{ '--zoom': zoom }">
    </el-button>


    <el-row :gutter="20" style="height: 90vh;">
      <el-col :span="6" style="height: 100%;">
        <div class="left_box_t">
          <div style="height:100%;width: 100%;" id="left_box_t" @mousemove="HistogramMousemove1"
            @mouseleave="HistogramMouseleave1"></div>
          <div class="left_text" :style="{ '--zoom': zoom }">发明公开排名</div>
        </div>
        <div class="left_box_t">
          <div style="height:100%;width: 100%;" id="left_box_t_z" @mousemove="HistogramMousemove2"
            @mouseleave="HistogramMouseleave2"></div>
          <div class="left_text" :style="{ '--zoom': zoom }">发明授权排名</div>
        </div>
        <div class="left_box_t">
          <div style="height:100%;width: 100%;" id="left_box_b_z" @mousemove="HistogramMousemove3"
            @mouseleave="HistogramMouseleave3"></div>
          <div class="left_text" :style="{ '--zoom': zoom }">实用新型授权排名</div>

        </div>
        <div class="left_box_t">
          <div style="height:100%;width: 100%;" id="left_box_b" @mousemove="HistogramMousemove4"
            @mouseleave="HistogramMouseleave4"></div>
          <div class="left_text" :style="{ '--zoom': zoom }">外观设计授权排名</div>

        </div>
      </el-col>
      <el-col :span="11" style="height: 100%;">
        <div class="zho_box_t" :style="{ '--zoom': zoom }">
          <div class="change_t">
            <el-row :gutter="11">
              <el-col :span="8">
                <div>
                  ——全区累计有效专利——<br />
                  <span class="add_change">
                    <CountTo :startVal='0' :endVal='changeList.valid_patent' :duration='2100' />
                  </span>
                </div>
              </el-col>
              <el-col :span="4">
                <div>
                  ——本月变化——<br />
                  <span class="add_change">
                    <CountTo :startVal='0' :endVal='changeList.month_add' :duration='2100' />
                  </span>
                </div>
              </el-col>
              <el-col :span="4">
                <div>
                  ——环比变化——<br />
                  <span class="add_change">
                    <span v-if="changeList.ratio_status == 0">
                      -
                    </span>
                    <CountTo :startVal='0' :endVal='Math.abs(changeList.ratio_add)' :duration='2100' :decimals="1" />
                    <span>
                      %
                    </span>
                  </span>
                </div>
              </el-col>
              <el-col :span="4">
                <div>
                  ——同比变化——<br />
                  <span class="add_change">
                    <span v-if="changeList.prp_status == 0">
                      -
                    </span>
                    <CountTo :startVal='0' :endVal='Math.abs(changeList.prp_add)' :duration='2100' :decimals="1" />
                    <span>
                      %
                    </span>
                  </span>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="border"></div>
                <div style="width:90%">
                  ——全区商标——<br />
                  <span class="add_change">
                    <CountTo :startVal='0' :endVal='changeList.trademark' :duration='2100' />
                  </span>
                  <!-- <span class="add_change">{{changeList.trademark}}</span> -->
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="change_b">
            <el-row :gutter="11">
              <el-col :span="4" v-for="(item, index) in changeList.list" :key="index">
                <div class="border" v-if="index == 'trademark'"></div>
                <div class="change_b_item">
                  <div class="item_t">
                    <span style="padding: 4px 12px 3px 12px;">本月
                      <CountTo :startVal='0' :endVal='item.month_add' :duration='2100' />
                    </span>
                  </div>
                  <div class="item_z">
                    <div class="z_t">
                      <CountTo :startVal='0' :endVal='item.number' :duration='2100' />
                    </div>
                    <div class="z_b" :style="{ '--bgColor': changeBgc[index] }">{{ item.name }}</div>
                  </div>
                  <div class="item_b">
                    <el-row :gutter="6">
                      <el-col :span="12">
                        <div class="one_div">
                          <div>{{ item.prp_name }}</div>
                          <div class="state">
                            <div :class="item.prp_status == 0 ? 'span_typebot' : 'span_typeTop'">
                              <CountTo :startVal='0' :endVal='item.prp_add' :duration='2100' />
                              <span style="margin-left: -4px;">
                                %
                              </span>
                            </div>
                            <div :class="item.prp_status == 0 ? 'icon_bottom span_typebot' : 'span_typeTop'"><i
                                class="iconfont icon-fanhuidingbu "></i></div>
                          </div>
                        </div>
                      </el-col>
                      <el-col :span="12">
                        <div class="one_div one_div_r">
                          <div>{{ item.ratio_name }}</div>
                          <div class="state">
                            <div :class="item.ratio_status == 0 ? 'span_typebot' : 'span_typeTop'">
                              <CountTo :startVal='0' :endVal='item.ratio_add' :duration='2100' />
                              <span style="margin-left: -4px;">
                                %
                              </span>
                            </div>
                            <div :class="item.ratio_status == 0 ? 'icon_bottom span_typebot' : 'span_typeTop'"><i
                                class="iconfont icon-fanhuidingbu "></i></div>
                          </div>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="zho_box_b">
          <div class="zho_box_b_main" id="main"></div>
          <div class="left_text" :style="{ '--zoom': zoom }">各镇街专利总量数据</div>
          <div class="right_tooltip" :style="{ '--zoom': zoom }">
            <div class="tooltip_title">
              <div class="title_item">排名</div>
              <div class="title_item">街道</div>
              <div class="title_item">专利总量</div>
              <div class="title_item">全区占比</div>
            </div>
            <div v-for="(item, index) in dituTooltip" :key="index">
              <div class="tooltip_text">
                <div class="text_item text_ranking" :class="item.ranking < 3 ? 'text_ranking1' : ''">{{
                  item.ranking < 3 ? 'TOP' + item.ranking : item.ranking }}</div>
                    <div class="text_item">{{ item.name }}</div>
                    <div class="text_item text_Number">
                      <CountTo :startVal='0' :endVal='item.Number' :duration='2100' />
                    </div>
                    <div class="text_item text_Proportion">
                      <CountTo :startVal='0' :endVal='item.pro' :duration='2100' /><span>%</span>
                    </div>
                </div>
                <!-- <div :key="item.pro">{{average(item.pro)}}</div> -->
                <!-- <div v-if="index == 3">--------------- 全  区  平  均  占  比  线 ---------------</div> -->
                <el-divider v-if="item.pro > 10 && dituTooltip[index + 1].pro < 10">全 区 平 均 占 比 线</el-divider>
              </div>
            </div>
          </div>
      </el-col>
      <el-col :span="7" style="height: 100%;">
        <div class="right_box_t">
          <div style="min-height: 100%;width: 100%;" id="right_box_t" @mousemove="Linemousemove"
            @mouseleave="Linemouseleave"></div>
          <div class="left_text" :style="{ '--zoom': zoom }">全区专利趋势</div>
        </div>
        <div class="right_box_z">
          <div class="left_text" :style="{ '--zoom': zoom }">
            <div class="companyType">
              <div style="margin-right: 5px;">企业榜单</div>
              <div class="linkBox">
                <!-- <div class="el-dropdown-link">
                  {{ companyTypeName }}<i class="el-icon-arrow-down el-icon--right"></i>
                  <div class="el-popper">
                    <div class="el-popper-item" :class="companyTypeName == item.name ? 'el-popper-item-active' : ''"
                      @click="handleCommand(item)" v-for="item in companyTypeArr" :key="item.type">{{ item.name }}</div>
                  </div>
                </div> -->


                <el-dropdown trigger="click" @command="handleCommand" v-if="companyTypeName">
                  <span class="el-dropdown-link">
                    {{ companyTypeName }}<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown" :append-to-body="false">
                    <el-dropdown-item :command="item" v-for="item in companyTypeArr" :key="item.type">{{ item.name
                    }}</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
          </div>
          <div class="right_text">
            <span class="text_2" :style="{ '--zoom': zoom }" :class="status == 0 ? 'text_1' : ''"
              @click="dataList(1)">累计数据</span>
            <span style="user-select: none" :style="{ '--zoom': zoom }">|</span>
            <span class="text_2" :style="{ '--zoom': zoom }" :class="status == 1 ? 'text_1' : ''"
              @click="dataList(2)">上月更新</span>
          </div>
          <div class="box_z_item_amin">
            <div class="box_z_itemTop" :style="{ '--zoom': zoom }">
              <div>排名</div>
              <div>镇街</div>
              <div>公司</div>
              <!-- <div>排名变化</div> -->
              <div>数量</div>
            </div>
            <div class="scroll_box" ref="scroll_box" @mousemove="mousemove" @mouseleave="mouseleave"
              element-loading-background="#111129" v-loading="loading">
              <div class="box_z_item" :style="{ '--zoom': zoom }" v-for="(item, index) in top100List" :key="index"
                @click="goCompany(item)">
                <div>{{ item.ranking > 3 ? item.ranking : 'TOP' + item.ranking }}</div>
                <div>{{ item.street }}</div>
                <div>{{ item.company }}</div>
                <!-- <div>
                  <div v-if="item.change_rank == 999">
                    新入围
                  </div>
                  <div v-else :class="item.change_rank < 0 ? ' span_typebot' : 'span_typeTop'">
                    <span :style="{ color: item.change_rank == 0 ? '#4B98F7' : '' }">{{ item.change_rank == 0 ? '-' :
                      item.change_rank }}</span>
                    <span v-if="item.change_rank != 0"
                      :class="item.change_rank < 0 ? 'icon_bottom span_typebot' : 'span_typeTop'"><i
                        class="iconfont icon-fanhuidingbu "></i></span>
                  </div>
                </div> -->
                <div>{{ item.end }}</div>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="right_box_b">
          <div style="min-height: 100%;width: 100%;" id="right_box_b" @mousemove="HistogramMousemove5"
            @mouseleave="HistogramMouseleave5"></div>
          <div class="left_text" :style="{ '--zoom': zoom }">各镇街TOP100情况</div>
        </div> -->
      </el-col>
    </el-row>
  </div>
</template>
<script>
import CountTo from 'vue-count-to'
import * as echarts from 'echarts'
import mapJson from "@/views/administrators/gis/shunde.json";
import {
  center,
  centerarea,
  getleftlist,
  getmap,
  companyRank
} from "@/api/newuser.js";
export default {
  components: { CountTo },
  data() {
    return {
      // eslint-disable-next-line vue/no-reserved-keys
      zoom: 1,
      thezoom: null,
      thezoomType: false,
      value: false,
      type: 2,
      loading: true,
      pid: null,
      com_id: null,
      timer: null,
      rankType: 0,
      status: 0,
      fullscreen: false,
      averageType: true,
      companyTypeArr: [],
      companyTypeName: '',
      dituTooltip: [],
      Histogram1: [],
      timer1: null,
      Histogram2: [],
      timer2: null,
      Histogram3: [],
      timer3: null,
      Histogram4: [],
      timer4: null,
      Histogram5: [],
      timer5: null,
      top100List: [],
      top100List_data: [],
      dimensions1: ['product', '上月数量', '本月数量', '去年同期'],
      dimensions2: ['product', '上月数量', '本月数量'],
      dimensionsType: 1,

      Linetime: null,
      //正式
      changeList: {},
      changeBgc: {
        open: '#006CFF',
        auth: '#6ACCA3',
        news: '#EACF19',
        appear: '#7F6FEC',
        apply: '#FE7C4B',
        trademark: '#FE7C4B',
      },
      scrollDom: null,
      scrollDomTop: 0,

      myChartHistogram1: null,
      myChartHistogram2: null,
      myChartHistogram3: null,
      myChartHistogram4: null,
    };
  },
  mounted() {
    this.pid = this.$store.state.user.pid
    this.com_id = this.$store.state.user.com_id
    //监听地图点击事件
    window.myDialog = (street_id) => {
      this.$router.push({
        path: `visualization/Patent`,
        query: { id: street_id }
      })
    }
    // 监听页面全屏
    window.addEventListener("fullscreenchange", (e) => {
      if (screenfull.isFullscreen) {
        this.isFullFlag = true
      } else {
        this.isFullFlag = false
      }
    })

    // 监听页面滚动
    this.scrollDom = this.$refs.scroll_box;
    // console.log(demo, '首次进入页面的滚动条');
    this.timer = setInterval(() => {
      this.scrollDomTop = this.scrollDom.scrollTop
      this.scrollDom.scrollTop += 1;

      // console.log( this.scrollDom, '滚动条的定时器-首次进入页面');
      if (this.scrollDomTop == this.scrollDom.scrollTop) {
        this.scrollDom.scrollTop = 0;
      }
    }, 40);
    // console.log(this.timer, '滚动条的定时器-首次进入页面');
  },
  created() {
    // console.log(this.$store.state.user.pid, '我来判断有没有权限');
    this.center();
    this.centerarea();
    this.companyRank()
    this.$nextTick(() => {
      this.getleftlist();
      this.getmap();
    })
    // this.getleftlist();
    // this.getmap();
    // let t = window.devicePixelRatio   // 获取下载的缩放 125% -> 1.25    150% -> 1.5
    // let c = document.querySelector('body')
    // c.style.zoom = 0.62;   // 就去修改页面的缩放比例，这个公式我自己算的，不准确，勉强。

    // let t = window.devicePixelRatio
    // this.thezoom = -0.62 * t + 1.55;
    // this.thezoom = document.body.style.zoom;
    // const width = document.documentElement.clientWidth || document.body.clientWidth;
    // this.thezoom = 1 / (width / 1920)
    // window.addEventListener('resize', () => {
    //   const width = document.documentElement.clientWidth || document.body.clientWidth;
    //   this.thezoom = 1 / (width / 1920)
    // })

    // let c = document.querySelector('body')
    // c.style.zoom = 1

    //获取页面宽度
    let width = document.documentElement.clientWidth || document.body.clientWidth;
    this.zoom = width / 1920;
    // console.log(width, '页面宽度', this.zoom);

    window.addEventListener('resize', () => {
      // console.log('resize');
      // document.getElementById('left_box_t').resize();

    })

  },
  methods: {
    goCompany(row) {
      this.$router.push({
        path: '/workEnterprisevisit',
        query: {
          company_id: row.company_id,
          company_name: row.company,
        }
      })
    },
    handleCommand(command) {
      // console.log(command);
      this.top100List = []
      this.loading = true
      this.rankType = command.type
      this.companyTypeName = command.name
      this.companyRank()
    },
    companyRank() {
      companyRank({
        type: this.rankType,
        status: this.status
      }).then(res => {
        this.loading = false
        this.top100List = res.list.splice(0, 30)
        // console.log(this.companyTypeArr.length, 'this.companyTypeArr.length');
        if (this.companyTypeArr.length == 0) {
          this.companyTypeArr = res.arr
        }
        if (!this.companyTypeName) {
          this.companyTypeName = res.arr[0].name
        }


        this.scrollDom.scrollTop = 0;
        // console.log(this.top100List);
      })
    },
    average(pro) {
      if (this.averageType) {
        if (pro < 10) {
          this.averageType = false
          return true
        } else {
          return false
        }
      } else {
        return false
      }
    },
    mousemove() {
      clearInterval(this.timer);
      this.timer = null;
    },
    Linemousemove() {
      // clearInterval(this.Linetime);
      // this.Linetime = null;
    },
    Linemouseleave() {
      // this.Linetimer()
    },
    HistogramMousemove1() {
      // clearInterval(this.timer1);
      // this.timer1 = null;
    },
    HistogramMouseleave1() {
      // this.Histogramtimer1()
    },
    HistogramMousemove2() {
      // clearInterval(this.timer2);
      // this.timer2 = null;
    },
    HistogramMouseleave2() {
      // this.Histogramtimer2()
    },
    HistogramMousemove3() {
      // clearInterval(this.timer3);
      // this.timer3 = null;
    },
    HistogramMouseleave3() {
      // this.Histogramtimer3()
    },
    HistogramMousemove4() {
      // clearInterval(this.timer4);
      // this.timer4 = null;
    },
    HistogramMouseleave4() {
      // this.Histogramtimer4()
    },
    HistogramMousemove5() {
      // clearInterval(this.timer5);
      // this.timer5 = null;
    },
    HistogramMouseleave5() {
      // this.Histogramtimer5()
    },

    Histogramtimer1() {
      let myChart = echarts.init(document.getElementById('left_box_t'), 'dark');
      let dimensionsType = 1

      // this.timer1 = setInterval(() => {
      //   // console.log('定时器加载,刚刚进入', dimensionsType,timer);
      //   if (dimensionsType <= 3) {
      //     // console.log('定时器加载，变化', dimensionsType);
      //     if (dimensionsType == 1) {
      //       myChart.setOption({
      //         legend: {
      //           selected: {
      //             '上月数量': true,
      //             '本月数量': false,
      //             '去年同期': false
      //           },
      //         },
      //       })
      //     } else if (dimensionsType == 2) {
      //       myChart.setOption({
      //         legend: {
      //           selected: {
      //             '上月数量': false,
      //             '本月数量': true,
      //             '去年同期': false
      //           },
      //         },
      //       })
      //     } else if (dimensionsType == 3) {
      //       myChart.setOption({
      //         legend: {
      //           selected: {
      //             '上月数量': false,
      //             '本月数量': false,
      //             '去年同期': true
      //           },
      //         },
      //       })
      //     }
      //     dimensionsType += 1;
      //   } else {
      //     dimensionsType = 1;
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '上月数量': true,
      //           '本月数量': true,
      //           '去年同期': true
      //         },
      //       },
      //     })
      //   }
      // }, 5000)
    },
    Histogramtimer2() {
      let myChart = echarts.init(document.getElementById('left_box_t_z'), 'dark');
      let dimensionsType = 1
      // this.timer2 = setInterval(() => {
      //   // console.log('定时器加载,刚刚进入', dimensionsType,timer);
      //   if (dimensionsType <= 3) {
      //     // console.log('定时器加载，变化', dimensionsType);
      //     if (dimensionsType == 1) {
      //       myChart.setOption({
      //         legend: {
      //           selected: {
      //             '上月数量': true,
      //             '本月数量': false,
      //             '去年同期': false
      //           },
      //         },
      //       })
      //     } else if (dimensionsType == 2) {
      //       myChart.setOption({
      //         legend: {
      //           selected: {
      //             '上月数量': false,
      //             '本月数量': true,
      //             '去年同期': false
      //           },
      //         },
      //       })
      //     } else if (dimensionsType == 3) {
      //       myChart.setOption({
      //         legend: {
      //           selected: {
      //             '上月数量': false,
      //             '本月数量': false,
      //             '去年同期': true
      //           },
      //         },
      //       })
      //     }
      //     dimensionsType += 1;
      //   } else {
      //     dimensionsType = 1;
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '上月数量': true,
      //           '本月数量': true,
      //           '去年同期': true
      //         },
      //       },
      //     })
      //   }
      // }, 5000)
    },
    Histogramtimer3() {
      let myChart = echarts.init(document.getElementById('left_box_b_z'), 'dark');
      let dimensionsType = 1
      // this.timer3 = setInterval(() => {
      //   // console.log('定时器加载,刚刚进入', dimensionsType,timer);
      //   if (dimensionsType <= 3) {
      //     // console.log('定时器加载，变化', dimensionsType);
      //     if (dimensionsType == 1) {
      //       myChart.setOption({
      //         legend: {
      //           selected: {
      //             '上月数量': true,
      //             '本月数量': false,
      //             '去年同期': false
      //           },
      //         },
      //       })
      //     } else if (dimensionsType == 2) {
      //       myChart.setOption({
      //         legend: {
      //           selected: {
      //             '上月数量': false,
      //             '本月数量': true,
      //             '去年同期': false
      //           },
      //         },
      //       })
      //     } else if (dimensionsType == 3) {
      //       myChart.setOption({
      //         legend: {
      //           selected: {
      //             '上月数量': false,
      //             '本月数量': false,
      //             '去年同期': true
      //           },
      //         },
      //       })
      //     }
      //     dimensionsType += 1;
      //   } else {
      //     dimensionsType = 1;
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '上月数量': true,
      //           '本月数量': true,
      //           '去年同期': true
      //         },
      //       },
      //     })
      //   }
      // }, 5000)
    },
    Histogramtimer4() {
      let myChart = echarts.init(document.getElementById('left_box_b'), 'dark');
      let dimensionsType = 1
      // this.timer4 = setInterval(() => {
      //   // console.log('定时器加载,刚刚进入', dimensionsType,timer);
      //   if (dimensionsType <= 3) {
      //     // console.log('定时器加载，变化', dimensionsType);
      //     if (dimensionsType == 1) {
      //       myChart.setOption({
      //         legend: {
      //           selected: {
      //             '上月数量': true,
      //             '本月数量': false,
      //             '去年同期': false
      //           },
      //         },
      //       })
      //     } else if (dimensionsType == 2) {
      //       myChart.setOption({
      //         legend: {
      //           selected: {
      //             '上月数量': false,
      //             '本月数量': true,
      //             '去年同期': false
      //           },
      //         },
      //       })
      //     } else if (dimensionsType == 3) {
      //       myChart.setOption({
      //         legend: {
      //           selected: {
      //             '上月数量': false,
      //             '本月数量': false,
      //             '去年同期': true
      //           },
      //         },
      //       })
      //     }
      //     dimensionsType += 1;
      //   } else {
      //     dimensionsType = 1;
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '上月数量': true,
      //           '本月数量': true,
      //           '去年同期': true
      //         },
      //       },
      //     })
      //   }
      // }, 5000)
    },
    Histogramtimer5() {
      let myChart = echarts.init(document.getElementById('right_box_b'), 'dark');
      let dimensionsType = 1
      // this.timer5 = setInterval(() => {
      //   // console.log('定时器加载,刚刚进入', dimensionsType,timer);
      //   if (dimensionsType <= 3) {
      //     // console.log('定时器加载，变化', dimensionsType);
      //     if (dimensionsType == 1) {
      //       myChart.setOption({
      //         legend: {
      //           selected: {
      //             '上月数量': true,
      //             '本月数量': false,
      //             '去年同期': false
      //           },
      //         },
      //       })
      //     } else if (dimensionsType == 2) {
      //       myChart.setOption({
      //         legend: {
      //           selected: {
      //             '上月数量': false,
      //             '本月数量': true,
      //             '去年同期': false
      //           },
      //         },
      //       })
      //     } else if (dimensionsType == 3) {
      //       dimensionsType = 1
      //       myChart.setOption({
      //         legend: {
      //           selected: {
      //             '上月数量': true,
      //             '本月数量': true,
      //             '去年同期': true
      //           },
      //         },
      //       })
      //     }
      //     dimensionsType += 1;
      //   } else {
      //     dimensionsType = 1;
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '上月数量': true,
      //           '本月数量': true,
      //           '去年同期': true
      //         },
      //       },
      //     })
      //   }
      // }, 5000)
    },
    Linetimer() {
      let myChart = echarts.init(document.getElementById('right_box_t'), 'dark');
      let type = 0

      //折线图循环
      // this.Linetime = setInterval(() => {
      //   if (type == 0) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '发明公开': true,
      //           '发明授权': false,
      //           '实新授权': false,
      //           '外观授权': false
      //         }
      //       }
      //     })
      //     type += 1
      //   } else if (type == 1) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '发明公开': false,
      //           '发明授权': true,
      //           '实新授权': false,
      //           '外观授权': false
      //         }
      //       }
      //     })
      //     type += 1
      //   } else if (type == 2) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '发明公开': false,
      //           '发明授权': false,
      //           '实新授权': true,
      //           '外观授权': false
      //         }
      //       }
      //     })
      //     type += 1
      //   } else if (type == 3) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '发明公开': false,
      //           '发明授权': false,
      //           '实新授权': false,
      //           '外观授权': true
      //         }
      //       }
      //     })
      //     type += 1
      //   } else {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '发明公开': true,
      //           '发明授权': true,
      //           '实新授权': true,
      //           '外观授权': true
      //         }
      //       }
      //     })
      //     type = 0
      //   }
      // }, 5000)
    },
    mouseleave() {
      // this.timer = setInterval(() => {
      //   let demo1 = demo.scrollTop
      //   demo.scrollTop += 1;
      //   if (demo1 == demo.scrollTop) {
      //     demo.scrollTop = 0;
      //   }
      // }, 40);

      this.timer = setInterval(() => {
        this.scrollDomTop = this.scrollDom.scrollTop
        this.scrollDom.scrollTop += 1;
        if (this.scrollDomTop == this.scrollDom.scrollTop) {
          this.scrollDom.scrollTop = 0;
        }
      }, 40);
    },


    dataList(type) {
      this.top100List = []
      this.loading = true
      this.status = type - 1
      this.companyRank()
      // this.top100List = this.top100List_data[type - 1];
    },
    async center() {
      this.changeList = await center({ type: this.type })
      // console.log('changeList', this.changeList)
    },
    switchList() {
      this.value = !this.value
      if (this.value) {
        this.type = 1
      } else {
        this.type = 2
      }
      this.changeList = {}
      this.center()
      this.getleftlist()
    },
    async centerarea() {
      this.dituTooltip = await centerarea()
    },
    async getleftlist() {
      // this.Linemousemove()
      // this.HistogramMousemove1()
      // this.HistogramMousemove2()
      // this.HistogramMousemove3()
      // this.HistogramMousemove4()
      // this.HistogramMousemove5()
      let leftList = await getleftlist({
        type: this.type
      })
      this.Histogram1 = leftList.open
      this.Histogram2 = leftList.auth
      this.Histogram3 = leftList.news
      this.Histogram4 = leftList.apper
      this.Histogram5 = leftList.ranking
      // this.top100List = leftList.area
      // //数组获取前四个
      // this.top100List_data = [leftList.area, leftList.area_news]

      // let X_data = leftList.dateleft_box_b
      // let series_data = leftList.trademark

      let X_data = leftList.date
      let series_data = leftList.trademark


      //折线图
      let Line = document.getElementById('right_box_t');
      this.Line(Line, X_data, series_data)
      let chartDom1 = document.getElementById('left_box_t');
      let chartDom2 = document.getElementById('left_box_t_z');
      let chartDom3 = document.getElementById('left_box_b_z');
      let chartDom4 = document.getElementById('left_box_b');
      // let chartDom5 = document.getElementById('right_box_b');
      let t = window.devicePixelRatio
      let proportion = this.thezoom
      let domList = [chartDom1, chartDom2, chartDom3, chartDom4]
      domList.forEach(item => {
        if (proportion != 1) {
          // item.style.zoom =  1 / proportion;
          // item.style.transform = 'scale(' + proportion + ')';
          // item.style.transformOrigin = '0 0';
          // item.style.width =  proportion * 100  + '%';
        }

      })
      //柱状图
      this.$nextTick(() => {
        let myChartHistogram1 = echarts.init(chartDom1, 'dark');
        let myChartHistogram2 = echarts.init(chartDom2, 'dark');
        let myChartHistogram3 = echarts.init(chartDom3, 'dark');
        let myChartHistogram4 = echarts.init(chartDom4, 'dark');

        let option1 = this.HistogramOption(this.Histogram1, this.dimensions1)
        let option2 = this.HistogramOption(this.Histogram2, this.dimensions1)
        let option3 = this.HistogramOption(this.Histogram3, this.dimensions1)
        let option4 = this.HistogramOption(this.Histogram4, this.dimensions1)

        myChartHistogram1.setOption(option1)
        myChartHistogram2.setOption(option2)
        myChartHistogram3.setOption(option3)
        myChartHistogram4.setOption(option4)

        window.addEventListener("resize", function () {
          myChartHistogram1.resize();
          myChartHistogram2.resize();
          myChartHistogram3.resize();
          myChartHistogram4.resize();
        })

        // this.Histogram(this.myChartHistogram1, this.Histogram1, this.dimensions1, 1);

        // this.Histogram(this.myChartHistogram2, this.Histogram2, this.dimensions1, 2);

        // this.Histogram(this.myChartHistogram3, this.Histogram3, this.dimensions1, 3);

        // this.Histogram(this.myChartHistogram4, this.Histogram4, this.dimensions1, 4);

        // this.Histogram(chartDom5, this.Histogram5, this.dimensions2, 5);


        // window.onresize = this.myChartHistogram1.resize;
        // window.onresize = this.myChartHistogram2.resize;
        // window.onresize = this.myChartHistogram3.resize;
        // window.onresize = this.myChartHistogram4.resize;


      })
    },
    async getmap() {
      let data = await getmap()
      this.$nextTick(function () {
        //地图
        this.shunde(data)
        // let option =  this.shunde(data)
        // myChart.setOption(option);
      })

    },

    shunde(dataList) {
      //顺德地图配置
      let myChart = echarts.init(document.getElementById("main"));
      echarts.registerMap("顺德区", mapJson, {}); //
      let option = {
        grid: { // 让图表占满容器
          top: "30px",
          left: "30px",
          right: "30px",
          bottom: "40px",
          shou: true
        },
        //图标提示框组件
        tooltip: {
          // enterable: true,
          trigger: 'item',
          // 提示框的颜色
          backgroundColor: 'rgba(12, 16, 63,.7)',
          showDelay: 0,
          transitionDuration: 0.2,

          axisPointer: { // 坐标轴指示器配置项。
            type: 'shadow', // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。
            axis: 'auto', // 指示器的坐标轴。
            snap: true, // 坐标轴指示器是否自动吸附到点上
          },
          textStyle: { // 提示框浮层的文本样式。
            color: '#41feff',
            fontStyle: 'normal',
            fontWeight: 'normal',
            fontFamily: 'sans-serif',
            fontSize: 14,
          },
          padding: 0, // 提示框浮层内边距，
          triggerOn: 'click', // 提示框触发的条件。
          enterable: true, // 是否可以通过鼠标左键拖拽改变位置。
          extraCssText: 'z-index:99;', // 提示框浮层额外的css样式。
          formatter: (params) => {
            const result = params.data
            // console.log(result)
            return (
              `
              <div style='position: relative;width:321px;padding: 20px 13px 20px 17px;'>
                <div style='padding: 5px 7px 4px 4px;float: right;color: #FFF;background-color: #CA0010;border-radius: 5px;font-weight: bold;'>TOP${params.data.top}</div>
                <div style='font-size: 16px;color: #FFF;'>${result.name}<span onclick=myDialog('${result.street_id}') style='display: inline-block;background-color: #0ffbdc;color: #132a53;font-size: 12px;padding: 3px;margin-left: 10px;border-radius: 2px;'>点击查看详情</span></div>
                <span style='font-size: 16px;color: #47D7D8;font-weight: bold;'>专利总数：</span><span style='font-weight: bold;'>${params.data.number}</span>
                <div style='margin-top:20px;display: flex;'>
                  <div style='flex:33%;color:#fff;'>类型</div>
                  <div style='flex:33%;color:#fff;'>数量</div>
                  <div style='flex:33%;color:#fff;'>全区占比</div>
                </div>
                <div style='display: flex;color:#8656F8;'>
                  <div style='flex:33%;;'>发明公开</div>
                  <div style='flex:33%;;'>${result.type[0].number}</div>
                  <div style='flex:33%;;'>${result.type[0].proportion}</div>
                </div>
                <div style='display: flex;color:#5C87F5;'>
                  <div style='flex:33%;'>发明授权</div>
                  <div style='flex:33%;'>${result.type[1].number}</div>
                  <div style='flex:33%;'>${result.type[1].proportion}</div>
                </div>
                <div style='display: flex;color:#00ADF9;'>
                  <div style='flex:33%;'>实新授权</div>
                  <div style='flex:33%;'>${result.type[2].number}</div>
                  <div style='flex:33%;'>${result.type[2].proportion}</div>
                </div>
                <div style='display: flex;color:#00D9FC;'>
                  <div style='flex:33%;'>外观授权</div>
                  <div style='flex:33%;'>${result.type[3].number}</div>
                  <div style='flex:33%;'>${result.type[3].proportion}</div>
                </div>
              </div>
              `
            );
          }
        },
        series: [
          {
            name: "顺德",
            type: "map",
            mapType: "顺德区",
            geoIndex: 0, // 不可缺少，否则无tooltip 指示效果
            aspectScale: 1.1, //地图长度比
            // center: [800, '80%'], //地图中心点
            //地图占满整个屏幕
            // layoutCenter: ['150%', '150%'],
            // layoutSize: 450,
            colorBy: '',
            itemStyle: {
              show: true,
              //颜色地区
              areaColor: "#132a53",
              emphasis: { // 地区选中样式
                borderWidth: 2, //边框
                borderColor: '#fff',
                areaColor: '#0b1a2c',
                label: {
                  show: true,
                  textStyle: {
                    color: '#fff'
                  }
                }
              }

            },
            label: {
              show: true,
              textStyle: {
                // 文字颜色
                color: "#67d8f3"
              },
              emphasis: { // 文字选中样式
                borderWidth: 0, //边框
                borderColor: '#fff',
                areaColor: '#0b1a2c',
                label: {
                  show: true,
                  textStyle: {
                    color: '#fff'
                  }
                }
              }
            },
            data: dataList
          }]
      };
      option && myChart.setOption(option);
      // window.onresize = myChart.resize;
      window.addEventListener("resize", function () {
        myChart.resize();
      })

      //直接点击地图
      // myChart.on('click',  (params) => {
      //   // console.log(this)
      //   this.$router.push({
      //     path: `/visualization/Visit/`,
      //     query: { name: params.name }
      //   })
      // });
    },
    Histogram(myChart, dataList, dimensions, measures) {
      // let myChart = echarts.init(chartDom, 'dark');


      let option = {
        tooltip: {
          textStyle: { // 提示框浮层的文本样式。
            color: '#41feff',
            fontStyle: 'normal',
            fontWeight: 'normal',
            fontFamily: 'sans-serif',
            fontSize: 10,
          },
          backgroundColor: 'rgba(12, 16, 63,.7)',
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (datas) {
            let prp_name = datas[0].value.prp_name;
            let ratio_name = datas[0].value.ratio_name;
            if (dimensions.length > 3) {
              let res = `
                <div>
                  <span>本月：${datas[0].value.本月数量}</span>
                  <span>全区占比：${datas[0].value.全区占比}</span>
                </div>
                <div>
                  <span>上月：${datas[0].value.上月数量}</span>
                  <span style='color:#40FFAF'>${ratio_name}：${datas[0].value.ratio_add}</span>
                </div>
                <div>
                  <span>去年同期：${datas[0].value.去年同期}</span>
                  <span style='color:#FF443A'>${prp_name}：${datas[0].value.prp_add}</span>
                </div>
              `
              return res;

            } else {
              let res = `
                  <span>${datas[0].value.product}</span>

                <div>
                  <span>本月数量：${datas[0].value.本月数量}</span>
                </div>
                <div>
                  <span>上月数量：${datas[0].value.上月数量}</span>
                </div>
              `
              return res;

            }

          }
        },

        backgroundColor: '', //设置无背景色
        grid: { // 让图表占满容器
          top: "60px",
          left: "60px",
          right: "30px",
          bottom: "40px"
        },
        legend: {
          top: "20px",
          right: "30px",
          itemWidth: 8,
          itemHeight: 8,
          selected: {
            '上月数量': true,
            '本月数量': true,
            '去年同期': true
          }
        },
        dataset: {
          dimensions: dimensions,
          source: dataList
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            interval: 0,
            formatter: function (value) {
              // console.log(value);
              //获取页面宽度
              let width = document.body.clientWidth;
              //根据宽度判断显示字数
              if (width < 1360) {
                return value.split("").join("\n");
              } else {
                return value;
              }
            }
          }
        },
        yAxis: {
          splitLine: { //不显示分割线
            show: false
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: dimensions.length == 4 ?
          [
            {
              type: 'bar',
              itemStyle: {
                color: '#5f54f7'
              }
            },
            {
              type: 'bar',
              itemStyle: {
                color: '#47a9e4'
              },
              markLine: {
                symbol: 'none',
                data: [{
                  type: 'average',
                  name: '平均值',
                  lineStyle: {
                    normal: {
                      color: '#fff',
                      width: 1,
                      type: 'solid',
                    }
                  },
                  label: { //自定义显示标签
                    normal: {
                      color: '#000',
                      formatter: function (params) {
                        return ''
                      },
                    }
                  }
                },]
              }
            },
            {
              type: 'bar',
              itemStyle: {
                color: '#0ffbdc'
              }
            }
          ]
          :
          [
            {
              type: 'bar',
              itemStyle: {
                color: '#6153fa'
              }
            },
            {
              type: 'bar',
              itemStyle: {
                color: '#49a8e6'
              },
              markLine: {
                symbol: 'none',
                data: [{
                  type: 'average',
                  name: '平均值',
                  lineStyle: {
                    normal: {
                      color: '#fff',
                      width: 1,
                      type: 'solid'
                    }
                  },
                  label: { //自定义显示标签
                    normal: {
                      color: '#000',
                      formatter: function (params) {
                        return ''
                      },
                    }
                  }
                }]
              },
            }
          ],
      };
      option && myChart.setOption(option);
      window.onresize = myChart.resize;
      window.onresize = function () {
        myChart.resize();
      };
      let dimensionsType = 1

      //首次开启循环
      // if (measures == 1) {
      //   this.timer1 = setInterval(() => {
      //     let type = dimensions.length
      //     // console.log('定时器加载,刚刚进入', dimensionsType,timer);
      //     if (dimensionsType <= 3) {
      //       // console.log('定时器加载，变化', dimensionsType);
      //       if (dimensionsType == 1) {
      //         myChart.setOption({
      //           legend: {
      //             selected: {
      //               '上月数量': true,
      //               '本月数量': false,
      //               '去年同期': false
      //             },
      //           },
      //         })
      //       } else if (dimensionsType == 2) {
      //         myChart.setOption({
      //           legend: {
      //             selected: {
      //               '上月数量': false,
      //               '本月数量': true,
      //               '去年同期': false
      //             },
      //           },
      //         })
      //       } else if (dimensionsType == 3) {
      //         if (type == 3) {
      //           dimensionsType = 1
      //           myChart.setOption({
      //             legend: {
      //               selected: {
      //                 '上月数量': true,
      //                 '本月数量': true,
      //                 '去年同期': true
      //               },
      //             },
      //           })
      //         } else {
      //           myChart.setOption({
      //             legend: {
      //               selected: {
      //                 '上月数量': false,
      //                 '本月数量': false,
      //                 '去年同期': true
      //               },
      //             },
      //           })
      //         }
      //       }
      //       dimensionsType += 1;
      //     } else {
      //       dimensionsType = 1;
      //       myChart.setOption({
      //         legend: {
      //           selected: {
      //             '上月数量': true,
      //             '本月数量': true,
      //             '去年同期': true
      //           },
      //         },
      //       })
      //     }
      //   }, 5000)
      // } else if (measures == 2) {
      //   this.timer2 = setInterval(() => {
      //     let type = dimensions.length
      //     // console.log('定时器加载,刚刚进入', dimensionsType,timer);
      //     if (dimensionsType <= 3) {
      //       // console.log('定时器加载，变化', dimensionsType);
      //       if (dimensionsType == 1) {
      //         myChart.setOption({
      //           legend: {
      //             selected: {
      //               '上月数量': true,
      //               '本月数量': false,
      //               '去年同期': false
      //             },
      //           },
      //         })
      //       } else if (dimensionsType == 2) {
      //         myChart.setOption({
      //           legend: {
      //             selected: {
      //               '上月数量': false,
      //               '本月数量': true,
      //               '去年同期': false
      //             },
      //           },
      //         })
      //       } else if (dimensionsType == 3) {
      //         if (type == 3) {
      //           dimensionsType = 1
      //           myChart.setOption({
      //             legend: {
      //               selected: {
      //                 '上月数量': true,
      //                 '本月数量': true,
      //                 '去年同期': true
      //               },
      //             },
      //           })
      //         } else {
      //           myChart.setOption({
      //             legend: {
      //               selected: {
      //                 '上月数量': false,
      //                 '本月数量': false,
      //                 '去年同期': true
      //               },
      //             },
      //           })
      //         }
      //       }
      //       dimensionsType += 1;
      //     } else {
      //       dimensionsType = 1;
      //       myChart.setOption({
      //         legend: {
      //           selected: {
      //             '上月数量': true,
      //             '本月数量': true,
      //             '去年同期': true
      //           },
      //         },
      //       })
      //     }
      //   }, 5000)
      // } else if (measures == 3) {
      //   this.timer3 = setInterval(() => {
      //     let type = dimensions.length
      //     // console.log('定时器加载,刚刚进入', dimensionsType,timer);
      //     if (dimensionsType <= 3) {
      //       // console.log('定时器加载，变化', dimensionsType);
      //       if (dimensionsType == 1) {
      //         myChart.setOption({
      //           legend: {
      //             selected: {
      //               '上月数量': true,
      //               '本月数量': false,
      //               '去年同期': false
      //             },
      //           },
      //         })
      //       } else if (dimensionsType == 2) {
      //         myChart.setOption({
      //           legend: {
      //             selected: {
      //               '上月数量': false,
      //               '本月数量': true,
      //               '去年同期': false
      //             },
      //           },
      //         })
      //       } else if (dimensionsType == 3) {
      //         if (type == 3) {
      //           dimensionsType = 1
      //           myChart.setOption({
      //             legend: {
      //               selected: {
      //                 '上月数量': true,
      //                 '本月数量': true,
      //                 '去年同期': true
      //               },
      //             },
      //           })
      //         } else {
      //           myChart.setOption({
      //             legend: {
      //               selected: {
      //                 '上月数量': false,
      //                 '本月数量': false,
      //                 '去年同期': true
      //               },
      //             },
      //           })
      //         }
      //       }
      //       dimensionsType += 1;
      //     } else {
      //       dimensionsType = 1;
      //       myChart.setOption({
      //         legend: {
      //           selected: {
      //             '上月数量': true,
      //             '本月数量': true,
      //             '去年同期': true
      //           },
      //         },
      //       })
      //     }
      //   }, 5000)
      // } else if (measures == 4) {
      //   this.timer4 = setInterval(() => {
      //     let type = dimensions.length
      //     // console.log('定时器加载,刚刚进入', dimensionsType,timer);
      //     if (dimensionsType <= 3) {
      //       // console.log('定时器加载，变化', dimensionsType);
      //       if (dimensionsType == 1) {
      //         myChart.setOption({
      //           legend: {
      //             selected: {
      //               '上月数量': true,
      //               '本月数量': false,
      //               '去年同期': false
      //             },
      //           },
      //         })
      //       } else if (dimensionsType == 2) {
      //         myChart.setOption({
      //           legend: {
      //             selected: {
      //               '上月数量': false,
      //               '本月数量': true,
      //               '去年同期': false
      //             },
      //           },
      //         })
      //       } else if (dimensionsType == 3) {
      //         if (type == 3) {
      //           dimensionsType = 1
      //           myChart.setOption({
      //             legend: {
      //               selected: {
      //                 '上月数量': true,
      //                 '本月数量': true,
      //                 '去年同期': true
      //               },
      //             },
      //           })
      //         } else {
      //           myChart.setOption({
      //             legend: {
      //               selected: {
      //                 '上月数量': false,
      //                 '本月数量': false,
      //                 '去年同期': true
      //               },
      //             },
      //           })
      //         }
      //       }
      //       dimensionsType += 1;
      //     } else {
      //       dimensionsType = 1;
      //       myChart.setOption({
      //         legend: {
      //           selected: {
      //             '上月数量': true,
      //             '本月数量': true,
      //             '去年同期': true
      //           },
      //         },
      //       })
      //     }
      //   }, 5000)
      // } else if (measures == 5) {
      //   this.timer5 = setInterval(() => {
      //     let type = dimensions.length
      //     // console.log('定时器加载,刚刚进入', dimensionsType,timer);
      //     if (dimensionsType <= 3) {
      //       // console.log('定时器加载，变化', dimensionsType);
      //       if (dimensionsType == 1) {
      //         myChart.setOption({
      //           legend: {
      //             selected: {
      //               '上月数量': true,
      //               '本月数量': false,
      //               '去年同期': false
      //             },
      //           },
      //         })
      //       } else if (dimensionsType == 2) {
      //         myChart.setOption({
      //           legend: {
      //             selected: {
      //               '上月数量': false,
      //               '本月数量': true,
      //               '去年同期': false
      //             },
      //           },
      //         })
      //       } else if (dimensionsType == 3) {
      //         if (type == 3) {
      //           dimensionsType = 1
      //           myChart.setOption({
      //             legend: {
      //               selected: {
      //                 '上月数量': true,
      //                 '本月数量': true,
      //                 '去年同期': true
      //               },
      //             },
      //           })
      //         } else {
      //           myChart.setOption({
      //             legend: {
      //               selected: {
      //                 '上月数量': false,
      //                 '本月数量': false,
      //                 '去年同期': true
      //               },
      //             },
      //           })
      //         }
      //       }
      //       dimensionsType += 1;
      //     } else {
      //       dimensionsType = 1;
      //       myChart.setOption({
      //         legend: {
      //           selected: {
      //             '上月数量': true,
      //             '本月数量': true,
      //             '去年同期': true
      //           },
      //         },
      //       })
      //     }
      //   }, 5000)
      // }
    },
    HistogramOption(dataList, dimensions) {
      return {
        tooltip: {
          textStyle: { // 提示框浮层的文本样式。
            color: '#41feff',
            fontStyle: 'normal',
            fontWeight: 'normal',
            fontFamily: 'sans-serif',
            fontSize: 10,
          },
          backgroundColor: 'rgba(12, 16, 63,.7)',
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (datas) {
            let prp_name = datas[0].value.prp_name;
            let ratio_name = datas[0].value.ratio_name;
            if (dimensions.length > 3) {
              let res = `
                <div>
                  <span>本月：${datas[0].value.本月数量}</span>
                  <span>全区占比：${datas[0].value.全区占比}</span>
                </div>
                <div>
                  <span>上月：${datas[0].value.上月数量}</span>
                  <span style='color:#40FFAF'>${ratio_name}：${datas[0].value.ratio_add}</span>
                </div>
                <div>
                  <span>去年同期：${datas[0].value.去年同期}</span>
                  <span style='color:#FF443A'>${prp_name}：${datas[0].value.prp_add}</span>
                </div>
              `
              return res;

            } else {
              let res = `
                  <span>${datas[0].value.product}</span>

                <div>
                  <span>本月数量：${datas[0].value.本月数量}</span>
                </div>
                <div>
                  <span>上月数量：${datas[0].value.上月数量}</span>
                </div>
              `
              return res;

            }

          }
        },

        backgroundColor: '', //设置无背景色
        grid: { // 让图表占满容器
          top: "60px",
          left: "60px",
          right: "30px",
          bottom: "40px"
        },
        legend: {
          top: "20px",
          right: "30px",
          itemWidth: 8,
          itemHeight: 8,
          selected: {
            '上月数量': true,
            '本月数量': true,
            '去年同期': true
          }
        },
        dataset: {
          dimensions: dimensions,
          source: dataList
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            interval: 0,
            formatter: function (value) {
              // console.log(value);
              //获取页面宽度
              let width = document.body.clientWidth;
              //根据宽度判断显示字数
              if (width <= 1360) {
                return value.split("").join("\n");
              } else {
                return value;
              }
            }
          }
        },
        yAxis: {
          splitLine: { //不显示分割线
            show: false
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: dimensions.length == 4 ?
          [
            {
              type: 'bar',
              itemStyle: {
                color: '#5f54f7'
              }
            },
            {
              type: 'bar',
              itemStyle: {
                color: '#47a9e4'
              },
              markLine: {
                symbol: 'none',
                data: [{
                  type: 'average',
                  name: '平均值',
                  lineStyle: {
                    normal: {
                      color: '#fff',
                      width: 1,
                      type: 'solid',
                    }
                  },
                  label: { //自定义显示标签
                    normal: {
                      color: '#000',
                      formatter: function (params) {
                        return ''
                      },
                    }
                  }
                },]
              }
            },
            {
              type: 'bar',
              itemStyle: {
                color: '#0ffbdc'
              }
            }
          ]
          :
          [
            {
              type: 'bar',
              itemStyle: {
                color: '#6153fa'
              }
            },
            {
              type: 'bar',
              itemStyle: {
                color: '#49a8e6'
              },
              markLine: {
                symbol: 'none',
                data: [{
                  type: 'average',
                  name: '平均值',
                  lineStyle: {
                    normal: {
                      color: '#fff',
                      width: 1,
                      type: 'solid'
                    }
                  },
                  label: { //自定义显示标签
                    normal: {
                      color: '#000',
                      formatter: function (params) {
                        return ''
                      },
                    }
                  }
                }]
              },
            }
          ],
      };

    },

    Line(chartDom, X_data, series_data) {
      let myChart = echarts.init(chartDom, 'dark');
      let option = {
        backgroundColor: '', //设置无背景色
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['发明公开', '发明授权', '实新授权', '外观授权']
        },
        grid: {
          top: "60px",
          left: "30px",
          right: "30px",
          bottom: "20px",
          containLabel: true
        },
        legend: {
          top: "20px",
          right: "30px",
          itemWidth: 8,
          itemHeight: 8,
          selected: {
            '发明公开': true,
            '发明授权': true,
            '实新授权': true,
            '外观授权': true
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: X_data,
        },
        yAxis: {
          type: 'value',
          axisLabel: { //不显示坐标轴文字
            // show: false
          },
          splitLine: { //不显示分割线
            show: false
          }
        },
        series: [{
          name: '发明公开',
          type: 'line',
          stack: 'Total',
          data: series_data[0].data,
          itemStyle: {
            color: '#5ba1d4'
          }
        },
        {
          name: '发明授权',
          type: 'line',
          stack: 'Total',
          data: series_data[1].data,
          itemStyle: {
            color: '#35ead3'
          }
        },
        {
          name: '实新授权',
          type: 'line',
          stack: 'Total',
          data: series_data[2].data,
          itemStyle: {
            color: '#e5c86f'
          }
        },
        {
          name: '外观授权',
          type: 'line',
          stack: 'Total',
          data: series_data[3].data,
          itemStyle: {
            color: '#605ad6'
          }
        },
        ]
      }
      option && myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      })
      let type = 0


      //首次开启折线图定时器
      // this.Linetime = setInterval(() => {
      //   if (type == 0) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '发明公开': true,
      //           '发明授权': false,
      //           '实新授权': false,
      //           '外观授权': false
      //         }
      //       }
      //     })
      //     type += 1
      //   } else if (type == 1) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '发明公开': false,
      //           '发明授权': true,
      //           '实新授权': false,
      //           '外观授权': false
      //         }
      //       }
      //     })
      //     type += 1
      //   } else if (type == 2) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '发明公开': false,
      //           '发明授权': false,
      //           '实新授权': true,
      //           '外观授权': false
      //         }
      //       }
      //     })
      //     type += 1
      //   } else if (type == 3) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '发明公开': false,
      //           '发明授权': false,
      //           '实新授权': false,
      //           '外观授权': true
      //         }
      //       }
      //     })
      //     type += 1
      //   } else {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '发明公开': true,
      //           '发明授权': true,
      //           '实新授权': true,
      //           '外观授权': true
      //         }
      //       }
      //     })
      //     type = 0
      //   }
      // }, 5000)
    },
    pushswitch() {
      this.$router.push({
        path: '/visualization/Visit'
      })
    },
    pushome() {
      this.$router.push({
        path: '/visualization'
      })
    },
    off() {
      this.$router.push({
        path: '/newhome'
      })
    },
    screen() {
      let element = document.documentElement;
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    },
  },
  //组件销毁时清除定时器
  beforeDestroy() {
    this.mousemove()
    // this.Linemousemove()
    // this.HistogramMousemove1()
    // this.HistogramMousemove2()
    // this.HistogramMousemove3()
    // this.HistogramMousemove4()
    // this.HistogramMousemove5()
  }
};
</script>

<style scoped lang="less">
@import url("../../../styles/el-popper.css");

.el-dropdown-menu {
  background-color: #0e1941;
  border: #0e1941 solid 1px;

  min-width: 120px;
  position: absolute !important;
  top: 20px !important;
  left: -45px !important;

  .el-dropdown-menu__item {
    color: #4995F4 !important;
  }

  .el-dropdown-menu__item:hover {
    color: #68D8FE !important;
    background-color: #28293f !important;
  }

}


.switch {
  color: #fff;
  position: absolute;
  top: 20px;
  right: 100px;
  font-size: 14px;
  padding: 10px 20px;
  background-color: #0E1B47;
  border: 1px solid #67d7fd;
  zoom: var(--zoom);
}

.switch_switch1 {
  right: 200px;
  background-color: #0f1b47;
}

.switch_switch2 {
  right: 200px;
  background-color: #22dbdb;
  color: #0f1b47;
  border: 1px solid #0f1b47;
}

.Fullscreen {
  color: #fff;
  position: absolute;
  top: 20px;
  right: 28px;
  font-size: 14px;
  padding: 10px 20px;
  background-color: #0E1B47;
  border: 1px solid #67d7fd;
  zoom: var(--zoom);
}

.return {
  color: #fff;
  position: absolute;
  top: 65px;
  left: 28px;
  font-size: 14px;
  padding: 10px 20px;
  background-color: #0E1B47;
  border: 1px solid #67d7fd;
  margin-left: 0;
}

.off {
  color: #fff;
  position: absolute;
  top: 20px;
  left: 28px;
  font-size: 14px;
  padding: 10px 20px;
  background-color: #0E1B47;
  border: 1px solid #67d7fd;
  zoom: var(--zoom);
}


.diqu {
  position: relative;
  // min-width: 1920px;
  overflow: hidden;
  min-height: 100vh;
  background: #111129;
  padding: 0 28px;

  .top_title {
    padding-top: 1%;
    color: #fff;
    font-size: 36px;
    text-align: center;
    width: 100%;
    height: 8vh;
    background: url(../../../assets/web/top_k.png) no-repeat;
    background-size: 100% 100%;
    font-weight: bold;
    line-height: 76%;
    zoom: var(--zoom);

    .top_title_Small {
      font-size: 14px;
      font-weight: initial;
    }
  }

  .left_box_t {
    position: relative;
    width: 100%;
    // min-height: 224px;
    height: 23%;
    background: url(../../../assets/web/zho_s_k.png) no-repeat;
    background-size: 100% 100%;
    margin: 15px 0;

    .left_text {
      position: absolute;
      top: 14px;
      left: 14px;
      font-size: 20px;
      color: #fff;
      zoom: var(--zoom);
    }
  }

  .zho_box_t {
    width: 100%;
    height: 36%;
    background: url(../../../assets/web/zho_s_k.png) no-repeat;
    background-size: 100% 100%;
    margin: 15px 0 15px 0;
    padding: 26px 24px 28px 24px;
    color: #fff;
    zoom: var(--zoom);

    .change_t {
      height: 33%;

      .el-row {
        height: 100%;

        .el-col {
          height: 100%;

          .border {
            width: 10px;
            height: 100%;
            background-image: linear-gradient(to right, #0c317f, #10122b);
            margin: 0 5px 0 0;
          }

          div {
            width: 100%;
            font-size: 11px;
            text-align: center;
            height: 100%;
            background-color: #0F1B47;
            display: flex;
            flex-direction: column;
            justify-content: center;
            line-height: initial;

            .add_change {
              font-weight: bold;
              font-size: 33px;
              color: #28FEFE;
              display: flex;
              justify-content: center;
              flex-wrap: nowrap;
            }
          }

          &:last-child {
            display: flex;
            background-color: #111129;
            padding: 0 0px 0 0 !important;
          }
        }
      }
    }

    .change_b {
      height: 66%;

      .el-row {
        height: 100%;

        .el-col {
          height: 100%;

          .border {
            width: 10px;
            height: calc(100% + 11px);
            //高度100%加11px

            background-image: linear-gradient(to right, #0c317f, #10122b);
            margin: 0 5px 0 0;
          }

          .change_b_item {
            width: 100%;
            margin-top: 11px;
            font-size: 11px;
            text-align: center;
            height: 100%;
            background-color: #0F1B47;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            line-height: initial;

            .item_t {
              span {
                background-color: #1B3182;
                border-radius: 5px;
                color: #28FEFE;
                font-size: 10px;
                display: inline-block;
              }
            }

            .item_z {
              .z_t {
                font-size: 22px;
              }

              .z_b {
                font-size: 13px;
                color: #59A3FF;
                position: relative;
              }

              .z_b::before {
                content: '';
                display: inline-block;
                width: 5px;
                height: 12px;
                border-radius: 3px;
                background-color: var(--bgColor);
                margin-right: 5px;
                vertical-align: middle;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-35px, -50%);
              }
            }

            .item_b {
              .el-row {
                padding: 0 5px;

                .el-col {
                  .one_div {

                    background-color: #1B3182;
                    color: #52FFFF;
                    border-radius: 5px;
                    padding: 8px 2px;
                    font-size: 10px;
                    width: 100%;

                    .state {
                      display: flex;
                      justify-content: center;

                      i {
                        font-weight: bold;
                        font-size: 10px;
                      }

                      .span_typeTop {
                        color: #FF4439;
                      }

                      .span_typebot {
                        color: #40FFAF;
                      }
                    }
                  }

                  .one_div_r {
                    width: 98%;
                  }
                }
              }
            }
          }
        }

        .el-col:last-child {
          display: flex;
          // background-color: #111129;
          padding: 0 0px 0 0 !important;
        }
      }
    }
  }

  .zho_box_b {
    width: 100%;
    min-height: 59%;
    background: url(../../../assets/web/zho_s_k.png) no-repeat;
    background-size: 100% 100%;
    margin: 15px 0 15px 0;
    position: relative;

    .zho_box_b_main {
      width: 80%;
      height: 120%;
      position: absolute;
      top: -40px;
      left: -30px;
    }

    .left_text {
      position: absolute;
      top: 30px;
      left: 30px;
      font-size: 20px;
      color: #fff;
      zoom: var(--zoom);
    }

    .right_tooltip {
      width: 40%;
      height: 80%;
      background: rgba(14, 27, 71, .8);
      position: absolute;
      top: 60px;
      right: 30px;
      color: #fff;
      padding: 11px 10px 30px 10px;
      font-size: 14px;
      zoom: var(--zoom);

      .tooltip_title {
        display: flex;
        margin-bottom: 20px;

        .title_item {
          display: inline-block;
          flex: 25%;
          text-align: center;
        }
      }

      .tooltip_text {
        display: flex;
        padding: 4px 0;

        .text_item {
          display: inline-block;
          flex: 25%;
          text-align: center;
          margin: 1% 0;
        }

        .text_ranking {
          color: #00ADF9;
        }

        .text_ranking1 {
          color: #f1433a !important;
        }

        .text_Number {
          color: #00D9FC;
        }

        .text_Proportion {
          color: #5C87F5;
        }
      }

      ::v-deep .el-divider {
        position: initial;
        background-color: #fff;

        .el-divider__text {
          background-color: #0E1B47;
          color: #fff;
          font-size: 12px;
        }
      }
    }

  }

  .right_box_t {
    width: 100%;
    height: 23%;
    background: url(../../../assets/web/zho_s_k.png) no-repeat;
    background-size: 100% 100%;
    margin: 15px 0;
    position: relative;

    .left_text {
      position: absolute;
      top: 15px;
      left: 15px;
      font-size: 20px;
      color: #fff;
      zoom: var(--zoom);
    }
  }

  .right_box_z {
    width: 100%;
    height: 72%;
    background: url(../../../assets/web/zho_s_k.png) no-repeat;
    background-size: 100% 100%;
    margin: 15px 0;
    position: relative;
    color: #fff;
    // padding: 60px 22px;
    padding: 10% 5% 5% 5%;


    .companyType {
      display: flex;

      .linkBox {
        position: relative;

        .el-dropdown-link {
          color: #4995F4 !important;
          border: #4995F4 1px solid;
          display: inline-block;
          padding: 3px 5px;
          border-radius: 4px;
          font-size: 14px;

          .el-popper {
            position: absolute;
            left: 0;
            top: 24px;
            width: 100px;
            z-index: 999999;
            font-size: 14px;
            line-height: 24px;
            background-color: #0e1941;
            color: #4995F4;
            cursor: pointer;
            transform: scale(0);
            transform-origin: 0 0;
            transition: all 0.2s;

            .el-popper-item {
              padding: 5px;
            }

            .el-popper-item:hover {
              color: #68D8FE !important;
              background-color: #28293f !important;
            }

            .el-popper-item-active {
              color: #68D8FE !important;
              background-color: #28293f !important;
            }

          }
        }

        .el-dropdown-link:hover {
          .el-popper {
            transform: scale(1);
          }
        }
      }


    }

    .left_text {
      position: absolute;
      top: 15px;
      left: 15px;
      font-size: 20px;
      zoom: var(--zoom)
    }

    .right_text {
      position: absolute;
      top: 15px;
      right: 15px;
      font-size: 20px;

      .text_1 {
        color: #68D8FE !important;
        zoom: var(--zoom);
        cursor: pointer;
      }

      .text_2 {
        color: #4995F4;
        zoom: var(--zoom);
        cursor: pointer;
      }
    }

    .box_z_item_amin {
      overflow: hidden;
      height: 100%;

      .scroll_box {
        height: 93%;
        overflow: scroll;
        width: 105%;
        overflow-x: auto;
      }

      .box_z_item {
        zoom: var(--zoom);
        display: flex;
        font-size: 14px;
        padding: 10px 0;
        color: #4B98F7;

        //第一个div子元素
        div:nth-child(1) {
          flex: 10%;
          text-align: center;
        }

        div:nth-child(2) {
          flex: 20%;
          text-align: center;
        }

        div:nth-child(3) {
          flex: 40%;
          text-align: center;
        }

        div:nth-child(4) {
          flex: 15%;
          text-align: center;
        }

        div:nth-child(5) {
          flex: 15%;
          text-align: center;
        }



        .span_typebot {
          color: #00D9FC;
          display: flex;
          flex-wrap: nowrap;
          justify-content: center;
        }

        .span_typeTop {
          color: #FF4439;
          display: flex;
          flex-wrap: nowrap;
          justify-content: center;
        }
      }

      .box_z_itemTop {
        zoom: var(--zoom);
        display: flex;
        font-size: 14px;
        padding: 10px 0;
        color: #4B98F7;

        //第一个div子元素
        div:nth-child(1) {
          flex: 10%;
          text-align: center;
        }

        div:nth-child(2) {
          flex: 20%;
          text-align: center;
        }

        div:nth-child(3) {
          flex: 40%;
          text-align: center;
        }

        div:nth-child(4) {
          flex: 15%;
          text-align: center;
        }

        div:nth-child(5) {
          flex: 15%;
          text-align: center;
        }
      }
    }


    .box_z_item:hover {
      color: #68D8FE !important;
      background-color: #28293f !important;
    }
  }

  .right_box_b {
    width: 100%;
    height: 30%;
    background: url(../../../assets/web/zho_s_k.png) no-repeat;
    background-size: 100% 100%;
    margin: 15px 0;
    position: relative;

    .left_text {
      position: absolute;
      top: 15px;
      left: 15px;
      font-size: 20px;
      color: #fff;
      zoom: var(--zoom);
    }
  }
}

.quanx {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #111129;
  z-index: 999;
}

.icon_bottom {
  display: inline-block;
  transform: rotate(180deg);
}

@media (max-width: 1360px) {}

@media (max-width: 1280px) {}
</style>
